const { defineConfig } = require("@vue/cli-service");
const path = require("path");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
// const TerserPlugin = require("terser-webpack-plugin");
// const HtmlWebpackPlugin = require("html-webpack-plugin");
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);
// const AutoImport = require("unplugin-auto-import/webpack");
// const Components = require("unplugin-vue-components/webpack");
// const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
// window.addEventListener("resize", function () {
//   var rootValue = window.innerWidth / 10; // 假设设计稿的宽度是 10 倍 rootValue
//   document.documentElement.style.fontSize = rootValue + "px";
// });
const postCssPxToRem = require("postcss-pxtorem");

module.exports = defineConfig({
  transpileDependencies: true,
  assetsDir: "static",
  productionSourceMap: false,
  // integrity: true,
  devServer: {
    host: "localhost", // localhost
    port: 8080,
    https: true, // 是否开启https
    open: true, // 是否自动启动浏览器
    // 配置代理
    proxy: {
      "/api": {
        // 以 “/api” 开头的 代理到 下边的 target 属性 的值 中
        target: "https://art.bfsu.edu.cn",
        changeOrigin: true, // 是否改变域名：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        ws: true, // 是否启用websockets
        pathRewrite: {
          // 路径重写
          "^/api": "",
        },
      },
    },
  },
  lintOnSave: false,
  chainWebpack: (config) => {
    config.resolve.symlinks(true); // 修复热更新失效
    // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
    config.plugin("html").tap((args) => {
      // 修复 Lazy loading routes Error
      args[0].title = "北外国际商学院-艺术留学项目";
      args[0].chunksSortMode = "none";
      return args;
    });
    config.resolve.alias // 添加别名
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@views", resolve("src/views"));
    // 压缩图片
    // 需要 npm i -D image-webpack-loader
    // config.module
    //   .rule("images")
    //   .use("image-webpack-loader")
    //   .loader("image-webpack-loader")
    //   .options({
    //     mozjpeg: { progressive: true, quality: 65 },
    //     optipng: { enabled: false },
    //     pngquant: { quality: [0.65, 0.9], speed: 4 },
    //     gifsicle: { interlaced: false },
    //     webp: { quality: 75 },
    //   });
  },
  runtimeCompiler: true,
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            //
            require("postcss-pxtorem")({
              //这里是配置项，详见官方文档
              rootValue: 75, // 换算的基数
              selectorBlackList: ["weui", "mu"], // 忽略转换正则匹配项
              propList: ["*"],
            }),
          ],
        },
      },
    },
  },
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [],
    },
  },

  configureWebpack: (config) => {
    config.name = "北京外国语大学-商学院";
    // 开启 gzip 压缩
    // 需要 npm i -D compression-webpack-plugin
    const plugins = [];
    if (IS_PROD) {
      plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path][base].gz",
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 10240, //大于10k的进行压缩
          minRatio: 0.8,
        })
      );
      // plugins.push(
      //   //打包环境去掉console.log等
      //   // new TerserPlugin({
      //   //   terserOptions: {
      //   //     ecma: undefined,
      //   //     warnings: false,
      //   //     parse: {},
      //   //     compress: {
      //   //       drop_console: true,
      //   //       drop_debugger: false,
      //   //       pure_funcs: ["console.log"], // 移除console
      //   //     },
      //   //   },
      //   // })
      // );
    }

    config.plugins = [...config.plugins, ...plugins];
  },
});
